<!-- js代码-->
<script setup>
import { ref,reactive } from "vue";
import { useRouter } from 'vue-router'
import { ElMessage } from "element-plus";

const route = useRouter();

const user = reactive({
    username:"",
    password:""
})

const rules = reactive({
    username:[
        {required: true, message: '请输入用户名', trigger: 'blur'},
        {min: 3, max: 10, message: '长度3-10个字符', trigger: 'blur' }
    ],
    password:[
        {required: true, message: '请输入密码', trigger: 'blur'}
    ]
})


const ruleFormRef = ref()
import { login } from "../api/Login";
// 登录事件
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async(valid, fields) => {
    if (valid) {
        // 提交表单数据
        let result = await login(user)
        console.log(result.data.data)
        localStorage.setItem("token",result.data.data)
        ElMessage.success(result.data.message?result.data.message:"登录成功")

        // 跳转首页
        route.push({"path":"/"})


    } else {
      ElMessage.error("用户名或密码格式错误")
    }
  })
}


</script>
<!-- html -->
<template>
    <div class="container">
        <div class="login_container ">
            <div class="login_title">登录</div>
            <el-form
                :rules="rules"
                ref="ruleFormRef"
                :model="user"
            >
                <el-form-item label="用户名:" label-width="80px" prop="username">
                    <el-input  v-model="user.username"/>
                </el-form-item>
                <el-form-item label="密码:" label-width="80px" prop="password">
                    <el-input v-model="user.password"/>
                </el-form-item>
                <el-form-item>
                     <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<!-- 样式 -->
<style lang="css" scoped>
.login_container{
    width:400px;
    height:300px;
    border:1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),  /* 较淡的外部阴影 */
                0 6px 20px rgba(0, 0, 0, 0.19); /* 稍微更深一点的阴影 */
    background-color: aliceblue;
}

.container{
    display: flex;
    height: 100vh;
    width:100vw;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    background-color: antiquewhite;
}

.login_title{
    text-align: center;
    margin: 30px auto;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}
</style>